<script setup lang="ts">
import { ref } from "vue";
import fileDownload from "js-file-download";
import {
  exportPipeLineList, exportPipePointList,
  statisticsPipeLineList,
  statisticsPipePointList,
} from "@/api/pipe";
import { changeDateFormat } from "@/utils";

const tableData = ref([]);
const currentPage = ref(1);
const pageSize = ref(5);
const total = ref(0);
const methodType = ref(2);
const props = defineProps({
  statisticsConditionFromChart: Object,
});
const emitEvents = defineEmits(["toggleShowTable"]);
const isPoint = ref(false);

const handleCurrentChange = (val: number) => {
  currentPage.value = val;
  getData();
};
const onFullScreen = () => {
  const el: HTMLElement | null = document.querySelector(".staticResult");
  if (el) {
    const { height } = el.style;
    if (height === "" || height === "300px") {
      el.style.height = "calc(100vh -  185px)";
      pageSize.value = 15;
    } else {
      el.style.height = "300px";
      pageSize.value = 5;
    }
    getData();
  }
};
const download = () => {
  const api = isPoint.value ? exportPipePointList : exportPipeLineList
  api({
    ...props.statisticsConditionFromChart,
    pageSize: 100000,
    pageIndex: 1,
  }).then((res: any) => {
    const { attrKey, attrValue } = props.statisticsConditionFromChart;
    fileDownload(res.data, attrKey + "-" + (attrValue || '') + "-统计结果.xlsx");
  });
};
const getData = () => {
  const params = {
    ...props.statisticsConditionFromChart,
    pageSize: pageSize.value,
    pageIndex: currentPage.value,
  };
  isPoint.value = props.statisticsConditionFromChart?.isPointType;
  const api = isPoint.value ? statisticsPipePointList : statisticsPipeLineList;
  api(params).then(({ data, succeeded }: any) => {
    if (succeeded) {
      tableData.value = data.items.map((item, index) => {
        return {
          index: index + 1,
          ...item,
        };
      });
      total.value = data.totalCount;
    }
  });
};
const getField = (data: any, field: string) => {
  const { lineAttribute } = data;
  if (Array.isArray(lineAttribute)) {
    const obj = lineAttribute.find((item: any) => item.attr === field);
    if (obj) {
      if (obj.type === 4) return "";
      return obj.value;
    }
  }
  return "";
};
onMounted(() => getData());
</script>

<template>
  <div class="staticResult">
    <div class="title">
      统计结果
      <el-icon class="download" @click="download"><Download /></el-icon>
      <el-icon class="fullScreen" @click="onFullScreen"><FullScreen /></el-icon>
      <el-icon class="close" @click="emitEvents('toggleShowTable')"
        ><CircleClose
      /></el-icon>
    </div>
    <!-- 管点 -->
    <el-table v-if="isPoint" :data="tableData" style="flex: 1; width: 100%">
      <el-table-column label="序号" width="10%">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span>{{ scope.row.index }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="管点名称" width="10%">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span class="label">{{ scope.row.pointName }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="管点GIS编号" width="10%">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span class="label">{{ scope.row.pointGisNo }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="坐标位置" width="20%">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span class="label">{{ scope.row.geom }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="详细地址" width="20%">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span class="label">{{ scope.row.address }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="埋深(m)" width="10%">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span class="label">{{ scope.row.depth }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="投运时间" width="10%">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span class="label">{{
              changeDateFormat(scope.row.workStartDate)
            }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="录入时间" width="10%">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span class="label">{{
              changeDateFormat(scope.row.createTime)
            }}</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 管段 -->
    <el-table
      v-if="!isPoint"
      :data="tableData"
      style="flex: 1; width: 100%"
      :header-cell-style="{ 'text-align': 'left' }"
    >
      <el-table-column label="序号" width="5%">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span>{{ scope.row.index }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="管段编号" width="10%">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span class="label">{{ scope.row.lineGisNo }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="起点名称" width="10%">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span class="label">{{ scope.row.startPointName }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="终点名称" width="10%">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span class="label">{{ scope.row.endPointName }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="管段长度(m)" width="10%">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span class="label">{{ scope.row.length }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="平均埋深" width="10%">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span class="label">{{ scope.row.depth }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="管径" width="5%">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span class="label">{{ getField(scope.row, "管径") }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="口径" width="5%">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span class="label">{{ getField(scope.row, "口径") }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="管材" width="5%">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span class="label">{{ getField(scope.row, "管材") }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="投运时间" width="15%">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span class="label">{{
              changeDateFormat(scope.row.workStartDate)
            }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="录入时间" width="15%">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span class="label">{{
              changeDateFormat(scope.row.createTime)
            }}</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pager">
      <el-pagination
        :small="true"
        v-model:current-page="currentPage"
        :page-size="pageSize"
        :pager-count="5"
        layout="total, prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
.staticResult {
  position: absolute;
  bottom: 14px;
  left: 12px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  width: calc(100vw - 572px);
  height: 300px;
  color: #000;
  background-color: rgb(255 255 255 / 100%);
  border: 1px solid rgb(187 187 187);

  :deep(.el-table__header) {
    width: 100% !important;
  }

  :deep(.el-table__body) {
    width: 100% !important;
  }

  :deep(.el-table__cell) {
    height: 40px !important;
  }

  .title {
    height: 30px;
    padding: 5px 10px;
    color: #fff;
    background: #1990ff;

    .download {
      position: relative;
      top: 3px;
      right: 90px;
      float: right;
      cursor: pointer;
    }

    .fullScreen {
      position: relative;
      top: 3px;
      right: 45px;
      float: right;
      cursor: pointer;
    }

    .close {
      position: relative;
      top: 3px;
      float: right;
      cursor: pointer;
    }
  }

  .pager {
    position: relative;
    top: 5px;
    height: 30px;
    padding: 0 30px;

    :deep(.el-pagination) {
      float: right;
    }
  }
}
</style>
